<template>
	<view>
		<!-- <page-head :title="title"></page-head> -->
		<view class="uni-common-mt">
				<view class="uni-list">
					<view></view>
					<uni-list-chat
								:avatar-circle="true"
								:title="name"
								avatar="../../../../static/icon/user.png"
								:note="werksName"
								:clickable="false"
							/>
				</view> 
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<view class="uni-label">所属部门</view>
						</view>
						<view class="uni-list-cell-db">
							<view class="uni-input">{{departmentName}}</view>
						</view>
					</view>
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<view class="uni-label">岗位</view>
						</view>
						<view class="uni-list-cell-db">
							<view class="uni-input">{{positionName}}</view>
						</view>
					</view>
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<view class="uni-label">计薪方式</view>
						</view>
						<view class="uni-list-cell-db">
							<view class="uni-input">{{wageGroupName}}</view>
						</view>
					</view>
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<view class="uni-label">上班天数</view>
						</view>
						<view class="uni-list-cell-db">
							<view class="uni-input">{{workDays}}</view>
						</view>
					</view>
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<view class="uni-label">基本薪资</view>
						</view>
						<view class="uni-list-cell-db">
							<view class="uni-input">{{basicWage}}</view>
						</view>
					</view>
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<view class="uni-label">保底工资</view>
						</view>
						<view class="uni-list-cell-db">
							<view class="uni-input">{{minWage}}</view>
						</view>
					</view>
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<view class="uni-label">保底产量</view>
						</view>
						<view class="uni-list-cell-db">
							<view class="uni-input">{{minQuantity}}</view>
						</view>
					</view>
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<view class="uni-label">实际产量</view>
						</view>
						<view class="uni-list-cell-db">
							<view class="uni-input">{{actualQuantity}}</view>
						</view>
					</view>
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<view class="uni-label">超产工资</view>
						</view>
						<view class="uni-list-cell-db">
							<view class="uni-input">{{overproductionWage}}</view>
						</view>
					</view>
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<view class="uni-label">应发工资</view>
						</view>
						<view class="uni-list-cell-db">
							<view class="uni-input">{{yfWage}}</view>
						</view>
					</view>
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<view class="uni-label">请假扣款</view>
						</view>
						<view class="uni-list-cell-db">
							<view class="uni-input">{{leaveAmount}}</view>
						</view>
					</view>
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<view class="uni-label">奖励</view>
						</view>
						<view class="uni-list-cell-db">
							<view class="uni-input">{{jiangli}}</view>
						</view>
					</view>
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<view class="uni-label">扣款</view>
						</view>
						<view class="uni-list-cell-db">
							<view class="uni-input">{{koukuan}}</view>
						</view>
					</view>
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<view class="uni-label">借款</view>
						</view>
						<view class="uni-list-cell-db">
							<view class="uni-input">{{jiekuan}}</view>
						</view>
					</view>
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<view class="uni-label">住宿费</view>
						</view>
						<view class="uni-list-cell-db">
							<view class="uni-input">{{house}}</view>
						</view>
					</view>
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<view class="uni-label">水费</view>
						</view>
						<view class="uni-list-cell-db">
							<view class="uni-input">{{water}}</view>
						</view>
					</view>
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<view class="uni-label">电费</view>
						</view>
						<view class="uni-list-cell-db">
							<view class="uni-input">{{electricity}}</view>
						</view>
					</view>
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<view class="uni-label">实发工资</view>
						</view>
						<view class="uni-list-cell-db">
							<view class="uni-input">{{sfWage}}</view>
						</view>
					</view>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				workNo:'',
				month:'',
				name:'',
				werksName:'',
				departmentName:'',
				positionName:'',
				wageGroupName:'',
				workDays:'',
				basicWage:'',
				minWage:'',
				minQuantity:'',
				actualQuantity:'',
				overproductionWage:'',
				yfWage:'',
				leaveAmount:'',
				jiangli:'',
				koukuan:'',
				jiekuan:'',
				house:'',
				water:'',
				electricity:'',
				sfWage:'',
				listData:[]
			};
		},
		onLoad(e) {
			let userInfo = JSON.parse(decodeURIComponent(e.info));
			this.workNo = userInfo.workNo
			this.month = userInfo.month
			this.getList()
		},
		methods: {
			getList() {
				this.listData=[]
				let url = '/dcloud/hrPayroll/hrPayroll/list'
				this.pageNo+=1
				this.$http.get(url, {
					params: {
						"workNo":this.workNo,
						"month":this.month
					}
					
				}).then(res => {
					if (res.data.success) {
						this.listData=res.data.result.records;
						this.name = this.listData[0].workNo_dictText
						this.werksName = this.listData[0].werks_dictText
						this.departmentName = this.listData[0].departmentName
						this.positionName = this.listData[0].positionName
						this.wageGroupName = this.listData[0].wageGroupName
						this.workDays = this.listData[0].workDays
						this.basicWage = this.listData[0].basicWage==null?0:this.listData[0].basicWage
						this.minWage = this.listData[0].minWage==null?0:this.listData[0].minWage
						this.minQuantity = this.listData[0].minQuantity==null?0:this.listData[0].minQuantity
						this.actualQuantity = this.listData[0].actualQuantity==null?0:this.listData[0].actualQuantity
						this.overproductionWage = this.listData[0].overproductionWage==null?0:this.listData[0].overproductionWage
						this.yfWage = this.listData[0].yfWage==null?0:this.listData[0].yfWage
						this.leaveAmount = this.listData[0].leaveAmount==null?0:this.listData[0].leaveAmount
						this.jiangli = this.listData[0].jiangli==null?0:this.listData[0].jiangli
						this.koukuan = this.listData[0].koukuan==null?0:this.listData[0].koukuan
						this.jiekuan = this.listData[0].jiekuan==null?0:this.listData[0].jiekuan
						this.house = this.listData[0].house==null?0:this.listData[0].house
						this.water = this.listData[0].water==null?0:this.listData[0].water
						this.electricity = this.listData[0].electricity==null?0:this.listData[0].electricity
						this.sfWage = this.listData[0].sfWage==null?0:this.listData[0].sfWage
					}
				}).catch(err => {
					console.log(err);
				});
			},
        }
	 }
</script>

<style>
	.uni-list-cell:after {
		left: 20upx;
	}
	.uni-list-cell {
		height: 100upx;
	}
	.uni-input {
		text-align: center;
	}
	.uni-list {
		margin-bottom: 30upx;
	}
	.title {
		padding: 10px 0;
		width: 120px
	}
	
	.btn-save{
		background: #e3ae79;
		color: #FFFFFF;
		width: 150px;
		/* display: inline-block; */
		/* max-width: none; */
	}
	.btn-del{
		background: #fa6b4b;
		color: #FFFFFF;
		width: 150px;
		/* display: inline-block; */
	}
	/* .btn-bottom{
		display: flex;
		padding:10upx 0;
		flex-direction: row;
	} */
	.uni-list-cell{
		padding-right: 20upx;
	}
</style>
